<template>
    <div class="home">
        <!-- 头部 -->
        <vheader></vheader>
        <carousel :data="carouselList"></carousel>
        <!-- 图片列表 -->
        <div class="photo-list">
            <li v-for="(item, index) in photoList" :key="index">
                <photo :url="item.imgUrl" :title="item.title" :content="item.subTitle"></photo>
            </li>
            <div class="clearfix"></div>
        </div>
        <!-- 图片动态文字 -->
        <div class="photo-text">
            <photo-text :url="photoTextList[0].imgUrl" :title="photoTextList[0].title" :strong-title="photoTextList[0].strongTitle" :content="photoTextList[0].content" from="right"></photo-text>
            <photo-text :url="photoTextList[1].imgUrl" :title="photoTextList[1].title" :strong-title="photoTextList[1].strongTitle" :content="photoTextList[1].content" from="left"></photo-text>
        </div>
        <scroll-top></scroll-top>
    </div>
</template>

<script>
import vheader from "./header.vue";
import photo from "./photo.vue";
import photoText from "./photo-text.vue";
import scrollTop from "./scroll-top.vue";
import carousel from "./carousel.vue";
export default {
    data() {
        return {
            carouselList: [
                "static/carousel1.jpg",
                "static/carousel2.jpg",
                "static/carousel3.jpg",
            ],
            photoList: [{
                imgUrl: "static/img1.jpg",
                title: "风景",
                subTitle: "再美的风景，也需要欣赏他的人"
            },{
                imgUrl: "static/img2.jpg",
                title: "风景",
                subTitle: "再美的风景，也需要欣赏他的人"
            },{
                imgUrl: "static/img3.jpg",
                title: "风景",
                subTitle: "再美的风景，也需要欣赏他的人"
            },{
                imgUrl: "static/img4.jpg",
                title: "风景",
                subTitle: "再美的风景，也需要欣赏他的人"
            },{
                imgUrl: "static/img5.jpg",
                title: "风景",
                subTitle: "再美的风景，也需要欣赏他的人"
            },{
                imgUrl: "static/img6.jpg",
                title: "风景",
                subTitle: "再美的风景，也需要欣赏他的人"
            }],
            photoTextList: [{
                imgUrl: "static/img-text1.jpg",
                title: "旅行篇",
                strongTitle: "旅行和生活的纪录",
                content: "记录了作者在欧洲各国的旅行见闻和日常生活，向我们描述了活生生的欧式欧洲人的日常生活。"
            },{
                imgUrl: "static/img-text2.jpg",
                title: "艺术篇",
                strongTitle: "欧洲艺术见闻录",
                content: "记录了作者在欧洲各国的旅行见闻和日常生活，向我们描述了活生生的欧式欧洲人的日常生活。"
            }]
        }
    },
    components: {
        vheader,
        photo,
        photoText,
        scrollTop,
        carousel
    }
}
</script>

<style lang="scss">
@import "../style/home";
</style>